<template>
	<div class="map">
		<van-swipe :autoplay="3000">
			<van-swipe-item 
				v-for="(image, index) in images" 
				:key="index"
			>
				<img 
					style="width: 100%;height: 50vw;" 
					:src="image" 
					@click="showImg(image)"
				/>
			</van-swipe-item>
		</van-swipe>
		<van-search
			v-model="searchValue"
			show-action
			placeholder="请输入使用人姓名"
			@search="onSearch"
		>
			<template #action>
				<div @click="onSearch(searchValue)">搜索</div>
			</template>
		</van-search>
		<PullRefreshList v-model:refreshing="refreshing" v-model:loading="loading" v-model:finished="finished" v-model:list="list1" @load="onLoad">
			<div 
				v-for="(item,index) in list1" 
				:key="index" 
				class="content"
			>
				<div 
					class="img"
					@click="showImg(defaultImages)"
				>
					<img :src="defaultImages" >
				</div>
				<div class="font">
					<div>{{item.address}}</div>
					<div>使用人:{{item.gcb_name}}</div>
					<div>身份证:{{getDesensitizeIdCardStr(item.c_ex13)}}</div>
					<div>认购人:{{getDesensitizeNameStr(item.c_nam)}}</div>
					<div>
						<!-- <van-button type="primary" size="mini" @click.stop="content = item;actionSheetShow = true">一键导航</van-button> -->
						<van-button type="primary" size="mini" @click.stop="navigate">一键导航</van-button>
					</div>
				</div>
			</div>
		</PullRefreshList>
        <van-action-sheet v-model:show="actionSheetShow" :actions="actions" @select="onSelect" />
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, markRaw } from 'vue'
	import type { Ref, Raw } from 'vue'
	import { showImagePreview, showDialog, showLoadingToast, closeToast } from 'vant';
	import PullRefreshList from '@/components/PullRefreshList.vue'
    import { FhsdaohApi } from '@/apis'
	import { getDesensitizeNameStr, getDesensitizeIdCardStr } from '@/utils/utils'
	const images: Raw<string[]> = markRaw([new URL('@/assets/banner/gmjs_bg2.png', import.meta.url).href])
	const defaultImages: string = new URL('@/assets/banner/gmjs_bg.png', import.meta.url).href
	const list1: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const actionSheetShow: Ref<boolean> = ref(false)
	const actions: Ref<Array<any>> = ref([{name: '高德地图'}, {name: '百度地图'}])
	const content: any = ref({})

	const searchValue: Ref<string> = ref('')
	const onSearch = async (val) => {
		if (!searchValue.value) {
			showDialog({
				title: '提示',
				message: '请输入使用人姓名！'
			})
		} else {
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			})
			let val = await FhsdaohApi({
				gcb_name: searchValue.value,
			})
			closeToast()
			list1.value = val
			console.log(list1.value)
		}
	}

	const onSelect = (val) => {
		actionSheetShow.value = false
		if (val.name == '高德地图') {
			location.href = `https://uri.amap.com/marker?position=${content.value.lat},${content.value.lgt}&name=${content.value.address}&src=cs&coordinate=gaode&callnative=0`
		} else if (val.name == '百度地图') {
			location.href = `http://api.map.baidu.com/marker?location=${content.value.lat},${content.value.lgt}&title=${content.value.address}&content=${content.value.address}&output=html&src=webapp.cs.openBaiduMap`
		}   
	}
	const onLoad = async (callback) => {
		// list1.value = [
		// 	{
		// 		tc_id:1,
		// 		address:'凤凰山公墓位置c1-01',
		// 		tc_ex2:'昆明市安宁市安宁市太平新城街道小河边村',
		// 		gcb_name:'杨立',
		// 		c_ex13:'362523196802650025',
		// 		tc_ex9:new URL('@/assets/banner/gmjs_bg.png', import.meta.url).href,
		// 		c_ex10:'男',
		// 		lat: '102.526789',
		// 		lgt: '24.943899'
		// 	},
		// 	{
		// 		tc_id:1,
		// 		address:'凤凰山公墓位置c1-01',
		// 		tc_ex2:'昆明市安宁市安宁市太平新城街道小河边村',
		// 		gcb_name:'杨立2',
		// 		c_ex13:'362523196802650025',
		// 		tc_ex9:new URL('@/assets/banner/gmjs_bg.png', import.meta.url).href,
		// 		c_ex10:'男',
		// 		lat: '102.526789',
		// 		lgt: '24.943899'
		// 	},
		// ]
		if (searchValue.value) {
			let val = await FhsdaohApi({
				gcb_name: searchValue.value,
			})
			list1.value.push(...val)
		}
		
		// 结束返回true，还有值返回false
		callback(true)
	}
	const showImg = (img) => {
		showImagePreview({
			images: [
				img,
			],
		})
	}
	const navigate = () => {
		location.href='https://cb22kmxoz.wasee.com/wt/cb22kmxoz'
	}
</script>

<style lang="scss" scoped>
	.map{
		width: 100vw;
		height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
	}
    :deep(.van-pull-refresh) {
        overflow: scroll;
        flex: 1;
    }
	.content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 40vw;
	}
	.content > .img{
		width: 30vw;
		height: 30vw;
	}
	.content > .img img{
		width: 100%;
		height: 100%;
	}
	.content > .font{
		width: 60vw;
		height: 38vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.content > .font > div{
		overflow:hidden;
		/* white-space: nowrap;
		text-overflow: ellipsis; */
		color: #212121;
        text-align: left;
	}
	.content > .font > div:first-child{
		font-weight: bold;
		color: #181818;
	}
</style>
